/* =======================封装的css========================= */
/* ======================================== */

/* 1:隐藏滚动条，但是可以支持滚动的方法 */
::-webkit-scrollbar {
	display: none;
}

/* 小程序顶部导航栏适配xs xr */

/* X、XS机型的媒体查询 */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
}
/* XS MAX机型媒体查询 */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3){
}
/* XR机型媒体查询 */
/* @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2){
} */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2){
}

/* // 网上XR的device-width是414px，device-height是896px，发现不能用，设置成和X一样能进到对应的样式 */




/* H5 - meta */

/* H5 meta标签常用写法 */
/*

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="applicable-device" content="mobile" />  移动端写法，详情看楼下
<title>title</title>
<meta name="viewport" content="width=device-width, height=device-height, viewport-fit=cover, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,shrink-to-fit=no">

viewport-fit=cover： 针对iphonex的刘海，是页面铺满 height=device-height：可视高=设备高
*/

/* 移动端适配 */
/* <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no"> */
/*

百度可以通过基本html特征来判断是否适合无线端浏览:
PC站:<meta name="applicable-device" content="pc">
手机站：<meta name="applicable-device" content="mobile" />
响应式网页可标识：<meta name="applicable-device"content="pc,mobile">

<!-- 声明文档使用的字符编码 -->
<meta charset=’utf-8′>    

<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>

<!-- 页面描述 -->
<meta name=”description” content=”不超过150个字符”/>    

<!-- 页面关键词 -->
<meta name=”keywords” content=””/>      

<!-- 网页作者 -->
<meta name=”author” content=”name, email@gmail.com”/> 

<!-- 搜索引擎抓取 -->
<meta name=”robots” content=”index,follow”/>      

<!-- iOS 设备 begin -->
<meta name=”apple-mobile-web-app-title” content=”标题”> 

<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name=”apple-mobile-web-app-capable” content=”yes”/>

<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>

<!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes"/>

<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>

<!-- 设置苹果工具栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

<!--忽略页面中的数字识别为电话，忽略email识别 -->
<meta name="format-detection" content="telephone=no, email=no"/>

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">

<!-- 不让百度转码 -->
<meta http-equiv=”Cache-Control” content=”no-siteapp” />

<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">

<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">

<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">

<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- UC应用模式 -->
<meta name="browsermode" content="application">

<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no"> 

设置页面不缓存

<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

*/


/* H5设置字体 */
body,
html {
	font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}


/* 设置页面的自适应 等同于 rem */
body,
html {
	font-size: calc(100vw/7.5);
}

/* 使用的单位是rem ； 1rem=100px； 在750的设计稿中3.75改成7.5即可，因为是2倍图*/


/* css3中的vh/vw
vh: 相对于视窗的高度, 视窗被均分为100单位的vh;
vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;

vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;
vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;
*/

/* 
calc(100vh - 10px)  表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px)   表示整个浏览器窗口宽度减去10px的大小
 */


.body {
	/* calc(100vh)：不管页面有没有元素 页面的高度都为100% */
	/* height: 100%：只有有元素的时候才会显示元素的高度 */
	height: calc(100vh);
}



/* =========================== */

/* CSS--几种常用的 水平垂直居中 对齐方法 */

/* 1. 使用绝对定位 */
/* 需要固定宽高 */
.box {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: xxx;
	height: xxx;
	margin: auto;
}

.box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: xx;
	height: xx;
	margin-left: -(xx/2)px;
	margin-top: -(xx/2)px;
}

/* 2. 使用绝对定位+transform */
/* 不需要知道元素的宽高 */
.box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* 3. 使用display:flex; */
/* 这个对父元素里面的子元素进行使用， */
.boxZ {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ======================================================================================= */

/* 让元素自动排列填充 */

/* 1. 盒子模型 */
.box {
	display: flex;
	flex-wrap: wrap;
}

/* 浮动float, 不过需要消除浮动 */
.box {
	float: left;
}

/* ==================================================================================== */

/* ios滑动卡顿 */
.box {
	-webkit-overflow-scrolling: touch 可能会在IOS系统低的情况出现滚动条；尝试溢出解决
}

/* ============================================================================== */

/* 导航栏可以横向排列并移动 */
.box {
	display: -webkit-box;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	/*//属性控制元素在移动设备上是否使用滚动回弹效果. */
}

/* 使用了-webkit-overflow-scrolling:touch之后，页面偶尔会卡住不动 */
/* 解决方案：

方案一
<div id="app" style="-webkit-overflow-scrolling: touch;">
    <div style="min-height:101%"></div>
</div>

方案二
<div id="app" style="-webkit-overflow-scrolling: touch;">
    <div style="height:calc(100%+1px)"></div>
</div>

方法就是在webkit-overflow-scrolling:touch属性的下一层子元素上，将height加1%或1px。从而主动触发scrollbar。 */

/* ========================================================================= */

/*  object-fit和object-position主要是解决在布局时遇到的 尺寸 和 宽高比问题，说简单点就是处理图片会变形的问题
，而object-position默认值是 50% 50% ，就是居中的意思，
也可以用这两个属性来做 替换元素 的内容的水平垂直居中。 */

/* video视频上下空白解决 */
.vodeo {
	width: 100%;
	height: 100%;
	position: relative;
	/*解决视频上下有空白bug*/
	object-fit: cover;
	object-position: center center;
}

/* ios不能自动播放问题 */
/* <video id="slideVideo" playsinline></video>
  playsinline 针对ios不自动弹出播放器 */


/* IOS APP中，使用h5播放器，默认打开网页的时候，会自动全屏，解决方法webkit-playsinline */
/* <video src="1.mp4" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"></video> */

/* ============================================================== */
/* 四种颜色的圆 */
.box {
	width: 1.1rem;
	height: 1.1rem;
	border-width: .1rem;
	border-style: solid;
	border-top-color: #FB8480;
	border-right-color: #63B3E3;
	border-bottom-color: #FCD85C;
	border-left-color: #60C4C2;
	border-radius: 50%;
}

/* ============================================================== */
/* 改变input的默认placeholder颜色 */
/*改变input默认字体颜色*/
:-moz-placeholder {
	color: #b1babf;
	opacity: 1;
}

::-moz-placeholder {
	color: #b1babf;
	opacity: 1;
}

input:-ms-input-placeholder {
	color: #b1babf;
	opacity: 1;
}

input::-webkit-input-placeholder {
	color: #b1babf;
	opacity: 1;
}

/* ================================================================ */
/* css3控制div无限旋转 */

div {
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 1s;
	-moz-transition-property: -moz-transform;
	-moz-transition-duration: 1s;
	-webkit-animation: rotate 3s linear infinite;
	-moz-animation: rotate 3s linear infinite;
	-o-animation: rotate 3s linear infinite;
	animation: rotate 3s linear infinite;
}

@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(360deg)
	}
}

@-moz-keyframes rotate {
	from {
		-moz-transform: rotate(0deg)
	}

	to {
		-moz-transform: rotate(359deg)
	}
}

@-o-keyframes rotate {
	from {
		-o-transform: rotate(0deg)
	}

	to {
		-o-transform: rotate(359deg)
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(359deg)
	}
}

/* ================================================================ */
/* 移动端页面发现,点击图片（背景图按钮），出现了浅蓝色背景，实属影响页面美观，解决这一问题代码如下 */

html,
body {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

/* ================================================================ */
/* input消除边框 */
input {
	border: none;
	outline: none
}

/* ================================================================ */
/* 贝塞尔曲线画的弧度做的images弧度图 */
<div class="pure_top"></div>.pure_top {
	width: 100%;
	height: 100px;
	position: relative;
	z-index: -1;
	overflow: hidden;
}

.pure_top::after {
	content: '';
	width: 140%;
	height: 100px;
	position: absolute;
	left: -20%;
	top: 0;
	z-index: -1;
	border-radius: 0 0 50% 50%;
	background: #1496f1;
	/* 也可以放图片 ,center center:表示图片出于水平垂直居中,可以为top,bottom,left */
	background: url(timg.jpg) center center no-repeat;
	background-size: cover;
}


/* 渐变色的弧形背景图 */
.pure_top1 {
	width: 100%;
	height: 330px;
	position: relative;
	z-index: -1;
	overflow: hidden;
}

.pure_top1::after {
	content: '';
	width: 100%;
	height: 330px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	border-radius: 0 0 80% 80%;
	background: linear-gradient(160deg, #1496f1, #E0F0FA);
}

/* ================================================================ */
/* css3 线性渐变实现间断线条效果 -x-  这种效果 */
<div class="style-eight">第三方登陆</div>.style-eight {
	box-sizing: content-box;
	margin-bottom: 20px;
}

.style-eight:before {
	content: "";
	display: inline-block;
	position: relative;
	top: -6px;
	padding: 0 10px;
	width: 20%;
	height: 1px;
	background-image: linear-gradient(to right, #808080, #808080);
}

.style-eight:after {
	content: "";
	display: inline-block;
	position: relative;
	top: -6px;
	padding: 0 10px;
	width: 20%;
	height: 1px;
	background-image: linear-gradient(to right, #808080, #808080);
}